<!-- 邀请或参与拼团 -->
<template>
	<view class="ll-group">
		<view class="ll-group-container">
			<view
				class="ll-group-joinOrInvite"
				:style="{
					backgroundImage: `url(${type == 'invite' ? inviteBgUrl : joinBgUrl})`
				}"
			>
				<view class="seektime df alic">
					<image src="@/static/images/order/img_tc_time.png" class="seventeen"></image>
					<image src="@/static/images/order/img_invite_shou.png" class="hand"></image>
					<text>2022/09/22 18:00-18:30</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	name: 'popup',
	data() {
		return {};
	},
	props: {
		type: {
			type: String,
			default: ''
		},
		list: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	computed: {
		inviteBgUrl() {
			return require('@/static/images/order/img_invite_bg.png');
		},
		joinBgUrl() {
			return require('@/static/images/order/img_join_bg.png');
		}
	},
	created() {
		//点击这个按钮跳转的时候带一个参数过来，接受参数做判断是拼团还是邀请
		//如果是邀请 就显示邀请的背景图片
		// this.bgUrl = this.joinBgUrl;
		// this.bgUrl = this.inviteBgUrl;
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/common.scss';
.ll-group {
	// padding: 0 20rpx;
	@include Db_iosBottomDistance(120rpx);
	width: 100vw;
	height: 100vh;
	background: #f6f6f6;
	&-container {
		height: 690rpx;
		background-repeat: no-repeat;
	}
	&-joinOrInvite {
		height: 426rpx;
	}

	.ll-group-joinOrInvite {
		padding: 276rpx 20rpx 20rpx;
	}
	.seektime {
		width: 710rpx;
		height: 92rpx;
		position: relative;
		background: #ffffff;
		border-radius: 24rpx;
		padding: 32rpx 24rpx;
		.seventeen {
			width: 120rpx;
			height: 28rpx;
			margin-right: 20rpx;
		}
		.hand {
			width: 62rpx;
			height: 32rpx;
			position: absolute;
			bottom: 80rpx;
			right: 52rpx;
		}
		text {
			width: 328rpx;
			height: 28rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 28rpx;
		}
	}
}
.dfcc {
	display: flex;
	justify-content: center;
	align-items: center;
}
.df {
	display: flex;
}
.jutc {
	justify-content: center;
}

.alic {
	align-items: center;
}

.tac {
	text-align: center;
}
.w1 {
	width: 100%;
}
</style>
